<template>
  <div
    class="l-tab-page pd-8 gauge_demo"
    style="overflow-y: auto; padding-bottom: 0"
  >
    <div class="gauge_top">
      <div class="top_left">
        <div class="gauge_flex">
          <div style="width: 49%; height: 100%" class="border2">
            <p class="p_color">{{ $t("1秒风速") }}</p>
            <div style="padding: 20px">
              <p class="p_font">3.13 m/s</p>
              <el-progress
                :show-text="false"
                :stroke-width="26"
                :percentage="31.3"
                color="#5CB3E1"
              ></el-progress>
            </div>
          </div>
          <div style="width: 49%; height: 100%" class="border2">
            <p class="p_color">{{ $t("功率") }}</p>
            <div style="padding: 20px">
              <p class="p_font">1.58 KW</p>
              <el-progress
                :show-text="false"
                :stroke-width="26"
                :percentage="15.8"
                color="#55E1C2"
              ></el-progress>
            </div>
          </div>
        </div>
        <div style="height: 350px" class="border2 margin_10">
          <p class="p_color">{{ $t("电压/电流/转速") }}</p>
          <div style="height: 316px; display: flex">
            <l-echarts :option="voltageOptions" style="height: 316px" />
            <l-echarts :option="currentOptions" style="height: 316px" />
            <l-echarts :option="speedOptions" style="height: 316px" />
          </div>
        </div>
      </div>
      <div class="top_right">
        <div style="width: 300px" class="margin_10">
          <div class="border2">
            <p class="p_color">{{ $t("机舱") }}</p>
            <l-echarts :option="compassOptions" style="height: 316px" />
          </div>
          <p class="p_color border2" style="margin-top: 20px">
            {{ $t("指示灯") }}
          </p>
          <div class="circle_box border2">
            <div class="circle" style="border: 1px solid #ec5e64"></div>
            <div
              class="circle"
              style="background: #f5f5f5; border: 1px solid #55e1c2"
            ></div>
            <div
              class="circle"
              style="background: #f5f5f5; border: 1px solid #feb632"
            ></div>
          </div>
        </div>
        <div style="width: 180px" class="border2 margin_10">
          <p class="p_color">{{ $t("操作") }}</p>
          <div class="round_box">
            <button class="round" style="background: #ec5e64">
              {{ $t("急停") }}
            </button>
            <button class="round">
              {{ $t("复位") }}
            </button>
            <button class="round">{{ $t("自动") }}</button>
            <button class="round">
              {{ $t("停机") }}
            </button>
            <button class="round">
              {{ $t("顺偏航") }}
            </button>
            <button class="round">
              {{ $t("逆偏航") }}
            </button>
          </div>
        </div>
      </div>
    </div>
    <div>
      <div style="height: 200px" class="header_none">
        <p class="p_color p_color2">{{ $t("数据显示") }}</p>
        <div style="height: 160px">
          <l-table
            :columns="columns1"
            :dataSource="tableData1"
            :showHeader="false"
            :isShowNum="false"
          >
          </l-table>
        </div>
      </div>
      <div style="height: 200px; position: relative" class="header_none">
        <p class="p_color p_color2">{{ $t("逆变器_1") }}</p>
        <div style="height: 160px">
          <l-table
            :columns="columns2"
            :dataSource="tableData2"
            :showHeader="false"
            :isShowNum="false"
          >
          </l-table>
        </div>
      </div>
    </div>
    <div style="height: 270px; margin-bottom: 0">
      <l-table :columns="columns" :dataSource="tableData"> </l-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      option: {
        tooltip: {
          formatter: "{a} <br/>{b} : {c}",
        },
      },
      columns: [
        { label: this.$t("日期"), prop: "f_Date", minWidth: "150" },
        { label: this.$t("名称"), prop: "f_Name", minWidth: "150" },
        { label: this.$t("类型"), prop: "f_Type", minWidth: "150" },
        { label: this.$t("状态"), prop: "f_State", minWidth: "150" },
        { label: this.$t("说明"), prop: "f_Explain", minWidth: "150" },
        { label: this.$t("备注"), prop: "f_Note", minWidth: "320" },
      ],
      tableData: [
        {
          f_Date: "2023-05-03 14:45:68",
          f_Name: "逆偏航",
          f_Type: "Action",
          f_State: "0",
          f_Explain: "State_End",
          f_Note: "ccw AimAngle:25.07,Wdir_10min:-25.07,Wspd_5min:5.76",
        },
        {
          f_Date: "2023-05-03 14:45:68",
          f_Name: "顺偏航",
          f_Type: "Action",
          f_State: "1",
          f_Explain: "State_End",
          f_Note: "ccw AimAngle:25.07,Wdir_10min:-25.07,Wspd_5min:5.76",
        },
        {
          f_Date: "2023-05-03 14:45:68",
          f_Name: "逆偏航",
          f_Type: "Action",
          f_State: "0",
          f_Explain: "State_End",
          f_Note: "ccw AimAngle:25.07,Wdir_10min:-25.07,Wspd_5min:5.76",
        },
        {
          f_Date: "2023-05-03 14:45:68",
          f_Name: "顺偏航",
          f_Type: "Action",
          f_State: "1",
          f_Explain: "State_End",
          f_Note: "ccw AimAngle:25.07,Wdir_10min:-25.07,Wspd_5min:5.76",
        },
        {
          f_Date: "2023-05-03 14:45:68",
          f_Name: "逆偏航",
          f_Type: "Action",
          f_State: "0",
          f_Explain: "State_End",
          f_Note: "ccw AimAngle:25.07,Wdir_10min:-25.07,Wspd_5min:5.76",
        },
        {
          f_Date: "2023-05-03 14:45:68",
          f_Name: "顺偏航",
          f_Type: "Action",
          f_State: "1",
          f_Explain: "State_End",
          f_Note: "ccw AimAngle:25.07,Wdir_10min:-25.07,Wspd_5min:5.76",
        },
      ],
      tableLoading: false,
      columns1: [
        { prop: "f_Name1", minWidth: "150" },
        { prop: "f_Date1", minWidth: "150" },
        { prop: "f_Name2", minWidth: "150" },
        { prop: "f_Date2", minWidth: "150" },
        { prop: "f_Name3", minWidth: "150" },
        { prop: "f_Date3", minWidth: "150" },
        { prop: "f_Name4", minWidth: "150" },
        { prop: "f_Date4", minWidth: "150" },
        { prop: "f_Name5", minWidth: "150" },
        { prop: "f_Date5", minWidth: "150" },
      ],
      tableData1: [],
      columns2: [
        { prop: "f_Name1", minWidth: "150" },
        { prop: "f_Date1", minWidth: "150" },
        { prop: "f_Name2", minWidth: "150" },
        { prop: "f_Date2", minWidth: "150" },
        { prop: "f_Name3", minWidth: "150" },
        { prop: "f_Date3", minWidth: "150" },
        { prop: "f_Name4", minWidth: "150" },
        { prop: "f_Date4", minWidth: "150" },
        { prop: "f_Name5", minWidth: "150" },
        { prop: "f_Date5", minWidth: "150" },
      ],
      tableData2: [],
    };
  },
  computed: {
    voltageOptions() {
      let option = this.$deepClone(this.option);
      option.series = [
        {
          name: "Pressure",
          type: "gauge",
          min: 0,
          max: 800,
          itemStyle: {
            color: "#5CB3E1",
            shadowColor: "#F5F5F5",
            shadowBlur: 5,
            shadowOffsetX: 2,
            shadowOffsetY: 2,
          },
          progress: {
            show: true,
            width: 10,
          },
          axisLine: {
            roundCap: true,
            lineStyle: {
              width: 10,
              color: [[1, "#f5f5f5"]],
            },
          },
          detail: {
            fontSize: 20,
            valueAnimation: true,
            formatter: "{value}",
            color: "#5CB3E1",
          },
          data: [
            {
              value: 331.87,
              name: "DCV",
              color: "#5CB3E1",
            },
          ],
        },
      ];
      return option;
    },
    currentOptions() {
      let option = this.$deepClone(this.option);
      option.series = [
        {
          name: "Pressure",
          type: "gauge",
          min: 0,
          max: 200,
          itemStyle: {
            color: "#55E1C2",
            shadowColor: "#F5F5F5",
            shadowBlur: 5,
            shadowOffsetX: 2,
            shadowOffsetY: 2,
          },
          progress: {
            show: true,
            width: 10,
          },
          axisLine: {
            roundCap: true,
            lineStyle: {
              width: 10,
              color: [[1, "#f5f5f5"]],
            },
          },
          detail: {
            valueAnimation: true,
            formatter: "{value}",
            color: "#55E1C2",
          },
          data: [
            {
              value: 5.12,
              name: "DCA",
            },
          ],
        },
      ];
      return option;
    },
    speedOptions() {
      let option = this.$deepClone(this.option);
      option.series = [
        {
          name: "Pressure",
          type: "gauge",
          min: 0,
          max: 65,
          itemStyle: {
            color: "#FEB632",
            shadowColor: "#F5F5F5",
            shadowBlur: 5,
            shadowOffsetX: 2,
            shadowOffsetY: 2,
          },
          progress: {
            show: true,
            width: 10,
          },
          axisLine: {
            roundCap: true,
            lineStyle: {
              width: 10,
              color: [[1, "#f5f5f5"]],
            },
          },
          detail: {
            valueAnimation: true,
            formatter: "{value}",
            color: "#FEB632",
          },
          data: [
            {
              value: 41.42,
              name: "RPM",
            },
          ],
        },
      ];
      return option;
    },
    compassOptions() {
      let option = this.$deepClone(this.option);
      option.tooltip = {
        show: false,
        formatter: "{a} <br/>{b} : {c}级",
      };
      option.series = [
        {
          type: "pie",
          radius: ["50%", "70%"],
          startAngle: 90,
          emphasis: {
            scale: false,
          },
          legendHoverLink: false,
          lable: {
            show: false,
            emphasis: {
              show: false,
            },
          },
          labelLine: {
            show: false,
          },
          center: ["50%", "50%"],
          z: -10,
          itemStyle: {
            borderRadius: 5,
            borderColor: "#fff",
            borderWidth: 2,
          },
          data: [
            { value: 50, itemStyle: { color: "#5CB3E1" } },
            { value: 50, itemStyle: { color: "#55E1C2" } },
            { value: 50, itemStyle: { color: "#FEB632" } },
            { value: 50, itemStyle: { color: "#EC5E64" } },
            { value: 50, itemStyle: { color: "#5CB3E1" } },
            { value: 50, itemStyle: { color: "#55E1C2" } },
            { value: 50, itemStyle: { color: "#FEB632" } },
            { value: 50, itemStyle: { color: "#EC5E64" } },
          ],
        },
        {
          startAngle: 90,
          endAngle: -270,
          min: 0,
          max: 360,
          z: 8,
          center: ["50%", "50%"],
          radius: "70%",

          type: "gauge",
          axisTick: {
            show: false,
          },
          pointer: {
            show: true,
            length: "50%",
            width: "10%",
            offsetCenter: ["0", "0"],
            keepAspect: true,
            itemStyle: {
              color: "#6E6E6E",
            },
          },
          axisLine: {
            show: false,
          },
          splitLine: {
            show: false,
          },

          splitNumber: 8,
          axisLabel: {
            show: true,
            distance: -50,
            fontSize: 18,
            formatter: function (value) {
              switch (value) {
                case 0:
                  return "N";
                case 45:
                  return "NE";
                case 90:
                  return "E";
                case 135:
                  return "SE";
                case 180:
                  return "S";
                case 225:
                  return "SW";
                case 270:
                  return "W";
                case 315:
                  return "NW";
                default:
                  break;
              }
            },
          },
          detail: {
            show: false,
          },
          data: [
            {
              value: [150],
            },
          ],
        },
      ];
      return option;
    },
  },
  created() {
    let data1 = [
      {
        f_Name1: "控制/运行模式",
        f_Date1: "远程/自动",
        f_Name2: "风速_5M",
        f_Date2: "4.4m/s",
        f_Name3: "偏航/解缆方向",
        f_Date3: "--/--",
        f_Name4: "日发电量",
        f_Date4: "107.04kWh",
        f_Name5: "电机A/B/泄荷器温度",
        f_Date5: "38.9/36.6/31.7°C",
      },
      {
        f_Name1: "报警/运行状态",
        f_Date1: "正常/运行",
        f_Name2: "风向_1s",
        f_Date2: "11.5°",
        f_Name3: "偏航目标/已走",
        f_Date3: "0.0/0.0°",
        f_Name4: "月发电量",
        f_Date4: "825.67kWh",
        f_Name5: "机舱温度",
        f_Date5: "29.8°C",
      },
      {
        f_Name1: "偏航/变桨",
        f_Date1: "--/--",
        f_Name2: "风向_10M",
        f_Date2: "0.2°",
        f_Name3: "绞缆角度",
        f_Date3: "-469.0°",
        f_Name4: "年发电量",
        f_Date4: "30674.31kWh",
        f_Name5: "功率 变桨/偏航",
        f_Date5: "0.0/0.0kWh",
      },
      {
        f_Name1: "加热/泄荷",
        f_Date1: "--/--(2.94A/1.17kW)",
        f_Name2: "泄荷电压",
        f_Date2: "491.1V",
        f_Name3: "浆距角",
        f_Date3: "0.0°",
        f_Name4: "总发电量",
        f_Date4: "177436.30kWh",
        f_Name5: "时间",
        f_Date5: "23-08-08 15:53:09",
      },
    ];
    this.tableData1 = data1;
    let data2 = [
      {
        f_Name1: "风机状态",
        f_Date1: "发电",
        f_Name2: "三相电压",
        f_Date2: "203.7/206.0/206.5V",
        f_Name3: "电压谐波",
        f_Date3: "2.41%/2.38%/3.03%",
        f_Name4: "风机输入",
        f_Date4: "40.79RPM/1.00kW",
        f_Name5: "主板/面板",
        f_Date5: "43.98°C/32.82°C",
      },
      {
        f_Name1: "保护状态",
        f_Date1: "正常",
        f_Name2: "三相电流",
        f_Date2: "2.5/3.0/2.2A",
        f_Name3: "电流谐波",
        f_Date3: "36.41%/31.75%/37.05%",
        f_Name4: "直流输入",
        f_Date4: "329.6V/2.93A",
        f_Name5: "IGBT/变压器",
        f_Date5: "35.91.98°C/49.86°C",
      },
      {
        f_Name1: "电网状态",
        f_Date1: "正序",
        f_Name2: "并网输出",
        f_Date2: "0.8/3.5kWh/-0.2kVar",
        f_Name3: "零序分量",
        f_Date3: "0.6V/0.2A",
        f_Name4: "控制参考",
        f_Date4: "0.00RPM/235Nm",
        f_Name5: "风扇电流",
        f_Date5: "0.41A",
      },
      {
        f_Name1: "控制模式",
        f_Date1: "Pcurce",
        f_Name2: "频率/因数",
        f_Date2: "50.00Hz/0.960",
        f_Name3: "负序分量",
        f_Date3: "0.2V/0.7A",
        f_Name4: "连续运行",
        f_Date4: "278 days 02:29:21",
        f_Name5: "时间",
        f_Date5: "23-08-08 15:53:09",
      },
    ];
    this.tableData2 = data2;
  },
};
</script>
<style lang="scss">
.gauge_demo {
  > div {
    margin-bottom: 20px;
  }
  .gauge_top {
    background: #f5f5f5;
    width: 100%;
    height: 500px;
    display: flex;
    .top_left {
      flex: 1;
    }
    .top_right {
      width: 480px;
      display: flex;
      height: 100%;
      > div {
        height: 100%;
      }
    }
    .gauge_flex {
      width: 100%;
      height: 150px;
      padding: 10px;
      display: flex;
      justify-content: space-between;
    }
    .border2 {
      background: #ffffff;
    }
    .p_font {
      font-size: 20px;
      font-weight: bold;
      margin-bottom: 6px;
    }
    .circle_box {
      width: 100%;
      height: 93px;
      display: flex;
      justify-content: space-around;
      align-items: center;
    }
    .circle {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background: #ec5e64;
    }
    .round {
      width: 107px;
      height: 43px;
      border-radius: 10px;
      margin: auto;
      margin-bottom: 25px;
      background: #d9d9d9;
      border: none;
      font-size: 20px;
      font-weight: bold;
      color: #ffffff;
    }
    .round_box {
      width: 107px;
      margin: auto;
      padding-top: 40px;
    }
    .el-progress-bar__outer {
      background-color: #f5f5f5;
    }
  }
  .p_color {
    border-bottom: 1px solid #f5f5f5;
    padding-left: 10px;
    height: 34px;
    line-height: 34px;
    font-weight: bold;
    font-size: 15px;
  }
  .p_color2 {
    height: 40px;
    line-height: 40px;
    background-color: rgb(246, 248, 250);
  }
  .margin_10 {
    margin: 10px;
  }
}
</style>
